<template>
  <ul>
    <li
      class="rankingItem"
      v-for="rankingItem in ranking"
      :key="rankingItem.id"
    >
      <span>{{ rankingItem.updateFrequency }}</span>
        <RankingCard :rankingItem="rankingItem" />
    </li>
  </ul>
</template>

<script>
import RankingCard from "@/components/RankingCard.vue";
export default {
  components: {
    RankingCard,
  },
  data() {
    return {
      ranking: [],
    };
  },
  created() {
    this.axios.get("https://apis.netstart.cn/music/toplist").then((res) => {
      this.ranking = res.data.list.splice(0,4);
    });
  },
};
</script>

<style lang="less" scoped>

li.rankingItem {
  background-color: #f4e1e8;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  padding: 10px 5px 20px 20px;
  text-align: left;
  height:20vh;
  &:nth-of-type(even){
    background-color: #e0ebea;
  }

  & > div {
    display: flex;
  }
  & > span {
    color: #cbbbc1;
    font-size: 12px;
    align-self: flex-end;
  }
}
</style>